<template>
  <div class="icons-container">
    <el-header >
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['sysIcon.add']">新增</el-button>
        </div>
      </div>
<!--      <div>-->
<!--        <svg-icon class="primary" :icon-class="$route.meta.icon" />-->
<!--        <span class="primary">{{$route.meta.title}}</span>-->
<!--      </div>-->
<!--      <el-button v-permission="['sysIcon.add']" icon="el-icon-plus" type="primary" :loading="loading" @click="addClick">新增</el-button>-->
    </el-header>
    <div style="padding: 10px;box-sizing: border-box;">
      <el-tabs type="border-card"  v-model="iconType " style="height: calc(100vh - 235px)" @tab-click="tabClick">
        <el-tab-pane label="图标">
          <div class="grid"  style="height: calc(100vh - 300px)">
            <div v-for="item in iconData" :key="item.id">
              <div class="icon-item">
                <div class="icon-item-box">
                  <img class="icon-item-img" :src="item.iconUrl | thumbnail(180,180)"/>
                  <div v-permission="['sysIcon.del']" class="icon-item-mask" id="iconMask" @click="delClick(item)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="图片">
          <div class="grid_img" style="height: calc(100vh - 300px)">
            <div v-for="item in imgData" :key="item.id">
              <div class="icon-item">
                <div class="icon-item-box">
                  <img class="icon-item-img" :src="item.iconUrl | thumbnail_pad(250,250)"/>
                  <div v-permission="['sysIcon.del']" class="icon-item-mask" id="imgMask" @click="delClick(item)">
                    <i class="el-icon-delete" />
                  </div>
                </div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog custom-class="dialog"  title="新增" width="650px" :modal-append-to-body="false" :before-close="handleClose" v-el-drag-dialog :visible="isShow">
      <div style="overflow: auto;position: relative;">
        <el-form :model="iconForm" ref="iconDialogForm" label-width="80px">
          <el-form-item label="类型" prop="iconType" :rules="{required: true, message: '请选择类型', trigger: 'blur'}">
            <el-col :span="22">
              <el-select style="width: 100%" v-model="iconForm.iconType" placeholder="请选择类型">
                <el-option label="图标" value="0" />
                <el-option label="图片" value="1"  />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="名称" prop="name" :rules="{required: true, message: '请填写名称', trigger: 'blur'}">
            <el-col :span="22">
              <el-input v-model="iconForm.name" />
            </el-col>
          </el-form-item>
          <el-form-item label="图片" prop="iconUrl" :rules="{required: true, message: '请选择图片', trigger: 'blur'}">
            <el-col :span="22">
              <single-upload :singleUploadTitle='singleUploadTitle' v-model="iconForm.iconUrl"></single-upload>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-button-slot">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm('iconDialogForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-footer class="el-footerBox">
      <pagination v-show="iconTotal>0 && iconType==0" :total="iconTotal" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadSysIcon"></pagination>
      <pagination v-show="imgTotal>0 && iconType==1" :total="imgTotal" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadSysImg"></pagination>
    </el-footer>
  </div>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import { list, del ,save} from '@/api/sysIcon'
  import Pagination from '@/components/Pagination';
  import SingleUpload from '@/components/Upload/singleUpload'
  export default {
    directives: { elDragDialog ,permission},
    name:'sysIcon-index',
    data() {
      return {
        pageNum: 1,
        pageSize: 50,
        iconTotal: 0,
        imgTotal: 0,
        iconType :0,
        isShow:false,
        loading:false,
        iconForm:{
          iconType:'0',
          name:'',
          iconUrl:''
        },
        iconData:[],
        imgData:[],
        singleUploadTitle:'300*300'
      }
    },
    components: {
      Pagination,SingleUpload
    },
    created(){
      this.loadSysIcon()
    },

    methods: {
      addClick(){
        this.isShow = true;
      },
      tabClick(){
        this.pageNum = 1;
        if(this.iconType == 0){
          this.loadSysIcon()
        }else {
          this.loadSysImg()
        }

      },
      handleClose(){
        this.isShow = false
      },
      delClick(item){
        const _this = this
        this.$confirm('确认删除'+item.name+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(item.id).then(response => {
            console.log(response)
            if(item.iconType == 0){
              _this.iconData.forEach(function(listItem, index) {
                if (listItem.id == item.id) {
                  _this.iconData.splice(index, 1)
                }
              })
            }else {
              _this.imgData.forEach(function(listItem, index) {
                if (listItem.id == item.id) {
                  _this.imgData.splice(index, 1)
                }
              })
            }

          }).catch(error => {

          })
        }).catch(() => {
        })
      },
      confirm() {
        this.loading=true;
        save(this.iconForm).then(response => {
          console.log(response)
          if(response.data.iconType == 0){
            this.iconData.splice(0, 0,response.data)
          }else {
            this.imgData.splice(0, 0,response.data)
          }
          this.iconForm.name = '';
          this.iconForm.iconType = '0';
          this.iconForm.iconUrl = '';
          this.isShow = false;
          this.loading = false;
        }).catch(error => {
          this.isShow = false;
          this.loading = false;
        })

      },
      loadSysIcon() {
        const _this = this
        const params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('iconType',0 )
        list(params).then(response => {
          console.log(response)
          _this.iconData = response.data.data;
          _this.iconTotal = response.data.total
        }).catch(error => {

        })
      },
      loadSysImg() {
        const _this = this
        const params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('iconType', 1)
        list(params).then(response => {
          console.log(response)
          _this.imgData = response.data.data;
          _this.imgTotal = response.data.total
        }).catch(error => {

        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .icons-container {

    .grid {
      width: 100%;
      overflow: auto;
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

      span {
        display: block;
        font-size: 16px;
        margin-top: 10px;
      }

      .icon-item {
        margin: 20px;
        height: 85px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100px;
        float: left;
        font-size: 30px;
        color: #24292e;
        cursor: pointer;

        .icon-item-box{
          width: 30px;
          position: relative;

          .icon-item-img{
            display: block;
            width: 30px;
            height: 30px;
          }

          .icon-item-mask{
            position: absolute;
            top:0;
            left: 0;
            width: 30px;
            height: 30px;
            background-color: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            i{
              color: #ffffff;
              font-size: 13px;
            }
          }
        }
        .icon-item-box:hover #iconMask{
          display:flex;
        }

      }
    }

    .grid_img {
      width: 100%;
      overflow: auto;
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

      span {
        display: block;
        font-size: 16px;
        margin-top: 10px;
      }

      .icon-item {
        margin: 20px;
        height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 130px;
        float: left;
        font-size: 30px;
        color: #24292e;
        cursor: pointer;

        .icon-item-box{
          width: 110px;
          position: relative;

          .icon-item-img{
            display: block;
            width: 110px;
            height: 110px;
          }

          .icon-item-mask{
            position: absolute;
            top:0;
            left: 0;
            width: 110px;
            height: 110px;
            background-color: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            i{
              color: #ffffff;
              font-size: 16px;
            }
          }
        }
        .icon-item-box:hover #imgMask{
          display:flex;
        }
      }
    }

  }
</style>
